<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>数据可视化</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script> -->

  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/certificate-card.css">
  <link rel="stylesheet" href="css/prize-level.css">
  <link rel="stylesheet" href="css/level-distribution.css">
  <link rel="stylesheet" href="css/award-level.css">
  <link rel="stylesheet" href="css/data-overview.css">
  <link rel="stylesheet" href="css/popular-events.css">
  <link rel="stylesheet" href="css/school-ranking.css">
  <link rel="stylesheet" href="css/district-stats.css">
  <link rel="stylesheet" href="css/project-total.css">
  <link rel="stylesheet" href="css/event-total.css">
  <script src="js/jquery.js"></script>
  <script>
    $(function () {
      $('.myscroll').myScroll({
        speed: 60, //数值越大，速度越慢
        rowHeight: 38 //li的高度
      });
    });

    $(document).ready(function () {
      var whei = $(window).width()
      $("html").css({ fontSize: whei / 22 });
      $(window).resize(function () {
        var whei = $(window).width();
        $("html").css({ fontSize: whei / 22 })
      });
    });
  </script>
  <style></style>
</head>

<body>
  <div class="main">
    <div class="header">
      <div class="header-left fl" id="time"></div>
      <div class="header-center fl">
        <div class="header-title">
          赛项白名单数据汇总
        </div>
        <div class="header-img"></div>
      </div>
      <div class="header-right fl"></div>
      <div class="header-bottom fl"></div>

    </div>

    <div class="center">
      <div class="center-left fl">
        <div class="left-top">
          <!--<h1 id="ceshi">数据可视化</h1>-->
          <div class="title">证书类型分布</div>
          <div class="certificate-card">
            <div class="card-stats">
              <div class="stat-item">
                <p class="stat-number stat-primary">
                  12,586
                </p>
                <p class="stat-label" data-yteditvalue="学生证书">
                  学生证书
                </p>
              </div>
              <div class="stat-item">
                <p class="stat-number stat-secondary">
                  3,842
                </p>
                <p class="stat-label">
                  教师证书
                </p>
              </div>
              <div class="stat-item">
                <p class="stat-number stat-accent">
                  1,526
                </p>
                <p class="stat-label" data-yteditvalue="学校证书">
                  学校证书
                </p>
              </div>
            </div>
            <div class="progress-section">
              <div class="progress-item">
                <div class="progress-header">
                  <span>
                    学生证书
                  </span>
                  <span>
                    68%
                  </span>
                </div>
                <div class="progress-bar">
                  <div class="progress-fill progress-primary" style="width: 68%">
                  </div>
                </div>
              </div>
              <div class="progress-item">
                <div class="progress-header">
                  <span>
                    教师证书
                  </span>
                  <span>
                    22%
                  </span>
                </div>
                <div class="progress-bar">
                  <div class="progress-fill progress-secondary" style="width: 22%">
                  </div>
                </div>
              </div>
              <div class="progress-item">
                <div class="progress-header">
                  <span>
                    学校单位证书
                  </span>
                  <span>
                    10%
                  </span>
                </div>
                <div class="progress-bar">
                  <div class="progress-fill progress-accent" style="width: 10%">
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="left-cen">
          <div class="title">获奖等级统计</div>
          <div class="prize-level-card">
            <div class="prize-chart" id="prize-level-chart">
            </div>
            <div class="prize-stats">
              <div class="prize-stat-item">
                <div class="prize-stat-header">
                  <span class="prize-dot prize-dot-accent">
                  </span>
                  <span class="prize-label">
                    一等奖
                  </span>
                </div>
                <p class="prize-number">
                  1,256
                </p>
              </div>
              <div class="prize-stat-item">
                <div class="prize-stat-header">
                  <span class="prize-dot prize-dot-primary">
                  </span>
                  <span class="prize-label">
                    二等奖
                  </span>
                </div>
                <p class="prize-number">
                  2,843
                </p>
              </div>
              <div class="prize-stat-item">
                <div class="prize-stat-header">
                  <span class="prize-dot prize-dot-secondary">
                  </span>
                  <span class="prize-label">
                    三等奖
                  </span>
                </div>
                <p class="prize-number">
                  3,521
                </p>
              </div>
              <div class="prize-stat-item">
                <div class="prize-stat-header">
                  <span class="prize-dot prize-dot-other">
                  </span>
                  <span class="prize-label">
                    其他
                  </span>
                </div>
                <p class="prize-number">
                  856
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="left-bottom">
          <div class="title">赛项等级分布</div>
          <div class="bottom-b">
            <!-- <div id="chart3" class="allnav"></div> -->
            <div class="level-distribution-card">
              <div class="level-content">
                <div class="level-left">
                  <div class="level-stats">
                    <div class="level-stat-item">
                      <p class="level-label">
                        国家级
                      </p>
                      <p class="level-number">
                        8
                      </p>
                    </div>
                    <div class="level-stat-item">
                      <p class="level-label">
                        省级
                      </p>
                      <p class="level-number">
                        12
                      </p>
                    </div>
                    <div class="level-stat-item">
                      <p class="level-label">
                        市级
                      </p>
                      <p class="level-number">
                        4
                      </p>
                    </div>
                  </div>
                </div>
                <div class="level-right">
                  <div class="level-chart" id="level-chart">
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="center-cen fl">
        <div class="cen-top">
          <div class="top-title">
            <!-- <ul>
              <li>
                <p>数量统计</p>
                <span>3</span>
                <span>6</span>
                <span>5</span>
                <b>个</b>
              </li>
              <li>
                <p>同比上升</p>
                <span>1</span>
                <span>3</span>
                <b>%</b>
              </li>
            </ul> -->

            <div class="project-total-card">
              <div class="total-header">
                <h3 class="total-title">
                  参赛项目总数
                </h3>
              </div>
              <div class="total-content">
                <div class="total-info">
                  <p class="total-number">
                    24
                  </p>
                  <p class="total-trend">
                    <i class="fas fa-arrow-up">
                    </i>
                    12% 较上年度
                  </p>
                </div>
                <div class="total-chart" id="project-chart">
                </div>
              </div>
            </div>
            <div class="project-total-card">
              <div class="total-header">
                <h3 class="total-title" data-yteditvalue="参赛赛项总数">
                  参赛赛项总数
                </h3>
              </div>
              <div class="total-content">
                <div class="total-info">
                  <p class="total-number">
                    86
                  </p>
                  <p class="total-trend">
                    <i class="fas fa-arrow-up">
                    </i>
                    8% 较上年度
                  </p>
                </div>
                <div class="event-chart" id="event-chart">
                </div>
              </div>
            </div>
          </div>

          <div class="top-bottom">
            <!-- <div id="chart1" class="allnav"></div> -->
            <!-- <div class="district-stats-card"></div> -->
            <div class="stats-header">
              <h3 class="stats-title">
                各区数据统计
              </h3>
            </div>
            <div class="stats-chart" id="district-stats-chart"> </div>
          </div>
        </div>
        <div class="cen-bottom">
          <div class="title">获奖等级分布</div>
          <div class="bottom-b">
            <!-- <div id="chart4" class="allnav"></div> -->

            <div class="award-level-card">
              <!-- <div class="award-header">
                <h3 class="award-title">
                  获奖等级分布
                </h3>
              </div> -->
              <div class="award-filters">
                <button class="award-filter-btn award-filter-active">
                  全部赛项
                </button>
                <button class="award-filter-btn">
                  国家级
                </button>
                <button class="award-filter-btn">
                  省级
                </button>
              </div>
              <div class="award-chart" id="award-level-chart">
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="center-right fr">
        <div class="right-top">
          <div class="title">数据概览</div>

          <!-- <div class="echart wenzi">
            <div class="gun">
              <span>排名</span>
              <span>同比</span>
              <span>销量</span>
            </div>
            <div id="FontScroll" class="myscroll">
              <ul>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>1</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>2</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>3</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>4</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>5</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>6</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>7</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>8</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>9</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>10</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>
                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>11</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>

                  </div>
                </li>
                <li>
                  <div class="fontInner clearfix">
                    <span>
                      <b>12</b>
                    </span>
                    <span>2小时15分</span>
                    <span>2小时15分</span>

                  </div>
                </li>

              </ul>
            </div>
          </div> -->

          <div class="data-overview-card">
            <!-- <h3 class="overview-title">
              数据概览
            </h3> -->
            <div class="overview-stats">
              <div class="overview-stat-item">
                <i class="fas fa-school overview-icon overview-icon-primary">
                </i>
                <div>
                  <p class="overview-label" data-yteditvalue="登记学校">
                    登记学校
                  </p>
                  <p class="overview-number">
                    326
                  </p>
                </div>
              </div>
              <div class="overview-stat-item">
                <i class="fas fa-user-graduate overview-icon overview-icon-secondary">
                </i>
                <div>
                  <p class="overview-label" data-yteditvalue="登记学生">
                    登记学生
                  </p>
                  <p class="overview-number">
                    15,842
                  </p>
                </div>
              </div>
              <div class="overview-stat-item">
                <i class="fas fa-chalkboard-teacher overview-icon overview-icon-accent">
                </i>
                <div>
                  <p class="overview-label" data-yteditvalue="登记教师">
                    登记教师
                  </p>
                  <p class="overview-number">
                    2,456
                  </p>
                </div>
              </div>
              <div class="overview-stat-item">
                <i class="fas fa-certificate overview-icon overview-icon-other">
                </i>
                <div>
                  <p class="overview-label" data-yteditvalue="核定证书">
                    核定证书
                  </p>
                  <p class="overview-number">
                    17,954
                  </p>
                </div>
              </div>
            </div>
            <div class="overview-footer">
              <div class="overview-update-info">
                <h4 class="update-label">
                  数据更新时间
                </h4>
                <span class="update-time">
                  2025-06-15 09:23
                </span>
              </div>
              <div class="overview-progress-bar">
                <div class="overview-progress-fill">
                </div>
              </div>
              <p class="overview-status">
                数据已完成最新同步
              </p>
            </div>
          </div>

        </div>
        <div class="right-cen">
          <div class="title">热门赛项排行</div>
          <!-- <div id="chart2" class="allnav"></div> -->
          <div class="content">
            <div class="popular-events-card">
              <!-- <div class="events-header">
                 <h3 class="events-title">
                   热门赛项排行
                 </h3>
                 <a class="events-link" href="javascript:void(0);">
                   查看全部
                   <i class="fas fa-angle-right">
                   </i>
                 </a>
               </div> -->
              <div class="events-list">
                <div class="event-item">
                  <div class="event-rank event-rank-1">
                    1
                  </div>
                  <div class="event-content2">
                    <h4 class="event-name">
                      全国青少年科技创新大赛
                    </h4>
                    <p class="event-info">
                      <span class="event-level">
                        <i class="fas fa-medal">
                        </i>
                        国家级
                      </span>
                      <span class="event-schools">
                        <i class="fas fa-users">
                        </i>
                        128所学校
                      </span>
                    </p>
                  </div>
                  <div class="event-stats" data-ytextravalue="extra-hx3jjpe5w">
                    <p class="event-number2" data-ytindex="0" data-ytoriginindex="0">
                      986
                    </p>
                    <p class="event-label" data-yteditvalue="登记人数" data-ytindex="1" data-ytoriginindex="1"
                      data-ytparentvalue="extra-hx3jjpe5w">
                      登记人数
                    </p>
                  </div>
                </div>
                <div class="event-item">
                  <div class="event-rank event-rank-2">
                    2
                  </div>
                  <div class="event-content2">
                    <h4 class="event-name">
                      全国中小学生电脑制作活动
                    </h4>
                    <p class="event-info">
                      <span class="event-level">
                        <i class="fas fa-medal">
                        </i>
                        国家级
                      </span>
                      <span class="event-schools">
                        <i class="fas fa-users">
                        </i>
                        96所学校
                      </span>
                    </p>
                  </div>
                  <div class="event-stats">
                    <p class="event-number2">
                      754
                    </p>
                    <p class="event-label" data-yteditvalue="登记人数">
                      登记人数
                    </p>
                  </div>
                </div>
                <div class="event-item">
                  <div class="event-rank event-rank-3">
                    3
                  </div>
                  <div class="event-content2">
                    <h4 class="event-name">
                      广东省青少年科技创新大赛
                    </h4>
                    <p class="event-info">
                      <span class="event-level">
                        <i class="fas fa-medal">
                        </i>
                        省级
                      </span>
                      <span class="event-schools">
                        <i class="fas fa-users">
                        </i>
                        84所学校
                      </span>
                    </p>
                  </div>
                  <div class="event-stats">
                    <p class="event-number2">
                      632
                    </p>
                    <p class="event-label" data-yteditvalue="登记人数">
                      登记人数
                    </p>
                  </div>
                </div>
                <div class="event-item">
                  <div class="event-rank event-rank-4">
                    4
                  </div>
                  <div class="event-content2">
                    <h4 class="event-name">
                      广州市青少年科技创新大赛
                    </h4>
                    <p class="event-info">
                      <span class="event-level">
                        <i class="fas fa-medal">
                        </i>
                        市级
                      </span>
                      <span class="event-schools">
                        <i class="fas fa-users">
                        </i>
                        72所学校
                      </span>
                    </p>
                  </div>
                  <div class="event-stats">
                    <p class="event-number2">
                      518
                    </p>
                    <p class="event-label" data-yteditvalue="登记人数">
                      登记人数
                    </p>
                  </div>
                </div>
                <div class="event-item">
                  <div class="event-rank event-rank-5">
                    5
                  </div>
                  <div class="event-content2">
                    <h4 class="event-name">
                      全国青少年机器人竞赛
                    </h4>
                    <p class="event-info">
                      <span class="event-level">
                        <i class="fas fa-medal">
                        </i>
                        国家级
                      </span>
                      <span class="event-schools">
                        <i class="fas fa-users">
                        </i>
                        68所学校
                      </span>
                    </p>
                  </div>
                  <div class="event-stats">
                    <p class="event-number2">
                      492
                    </p>
                    <p class="event-label" data-yteditvalue="登记人数">
                      登记人数
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-bottom">
          <div class="title">学校参与热度排行</div>
          <div class="chat">
            <!-- <div id="chart5" class="allnav"></div> -->
            <div class="school-ranking-card">
              <!-- <div class="ranking-header">
                <h3 class="ranking-title">
                  学校参与热度排行
                </h3>
                <a class="ranking-link" href="javascript:void(0);">
                  更多
                </a>
              </div> -->
              <div class="ranking-list">
                <div class="ranking-item">
                  <div class="ranking-number ranking-number-1">
                    1
                  </div>
                  <div class="ranking-content">
                    <p class="school-name">
                      广州市番禺区市桥西丽小学
                    </p>
                    <div class="ranking-progress-bar">
                      <div class="ranking-progress-fill ranking-progress-accent" style="width: 95%">
                      </div>
                    </div>
                  </div>
                  <p class="ranking-count">
                    24项
                  </p>
                </div>
                <div class="ranking-item">
                  <div class="ranking-number ranking-number-2">
                    2
                  </div>
                  <div class="ranking-content">
                    <p class="school-name">
                      广州市海珠区实验小学
                    </p>
                    <div class="ranking-progress-bar">
                      <div class="ranking-progress-fill ranking-progress-primary" style="width: 88%">
                      </div>
                    </div>
                  </div>
                  <p class="ranking-count">
                    21项
                  </p>
                </div>
                <div class="ranking-item">
                  <div class="ranking-number ranking-number-3">
                    3
                  </div>
                  <div class="ranking-content">
                    <p class="school-name">
                      华南师范大学附属中学
                    </p>
                    <div class="ranking-progress-bar">
                      <div class="ranking-progress-fill ranking-progress-secondary" style="width: 76%">
                      </div>
                    </div>
                  </div>
                  <p class="ranking-count">
                    18项
                  </p>
                </div>
                <div class="ranking-item">
                  <div class="ranking-number ranking-number-4">
                    4
                  </div>
                  <div class="ranking-content">
                    <p class="school-name">
                      广州市越秀区东风东路小学
                    </p>
                    <div class="ranking-progress-bar">
                      <div class="ranking-progress-fill ranking-progress-other" style="width: 65%">
                      </div>
                    </div>
                  </div>
                  <p class="ranking-count">
                    15项
                  </p>
                </div>
                <div class="ranking-item">
                  <div class="ranking-number ranking-number-5">
                    5
                  </div>
                  <div class="ranking-content">
                    <p class="school-name">
                      广州市天河区华南师范大学附属小学
                    </p>
                    <div class="ranking-progress-bar">
                      <div class="ranking-progress-fill ranking-progress-other" style="width: 58%">
                      </div>
                    </div>
                  </div>
                  <p class="ranking-count">
                    14项
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>


  <script src="js/jquery.min.js"></script>
  <script src="js/echarts.min.js"></script>
  <!-- <script src="js/wodry.min.js"></script> -->
  <script src="js/fontscroll.js"></script>
  <script src="js/echarts.js"></script>

  <script>
    /*$('#ceshi').wodry({
 
        animation: 'rotateX',
 
        delay: 1000,
 
        animationDuration: 800
 
    });*/
    /*window.onload = function () {
        setInterval(function () {
            var hs=document.getElementById("ceshi");
            var hstyle=hs.style.transform;
            if(hstyle=='rotateX(-360deg)'){
                //console.log(1)
                hs.style.transform='rotateX(0deg)';
                hs.style.transform='transform 500ms cubic-bezier(0.55, 0.18, 0.92, 0.46) 0s;'
            }else {
                hs.style.transform='rotateX(-360deg)';
                hs.style.transition="all 2s";
            }
        }, 5000);
    };*/

    //顶部时间
    function getTime() {
      var myDate = new Date();
      var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var myToday = myDate.getDate(); //获取当前日(1-31)
      var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
      var myHour = myDate.getHours(); //获取当前小时数(0-23)
      var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
      var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
      var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      var nowTime;

      nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
      //console.log(nowTime);
      $('#time').html(nowTime);
    };
    function fillZero(str) {
      var realNum;
      if (str < 10) {
        realNum = '0' + str;
      } else {
        realNum = str;
      }
      return realNum;
    }
    setInterval(getTime, 1000);

  </script>
</body>

</html>